const time = require('../../utils/time');
// const soup = require('https://wawa-images.oss-cn-shenzhen.aliyuncs.com/random/ChickenSoup.js');

// pages/home/home.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // tabbar_active:2,
    phone: true,
    userInfoshow: true,
    backShow: false,
    identity:'',
    // 数据区，从服务端拿到的数据
    name: "", // 姓名
    userPhone: "", // 电话
    posterUrl: "", // 海报地址
    photoUrl: "", // 头像地址
    qrcodeUrl: "", // 小程序二维码

    // 设置区，针对部件的数据设置
    photoDiam: 50, // 头像直径
    qrcodeDiam: 80, // 小程序码直径
    infoSpace: 13, // 底部信息的间距
    saveImageWidth: 500, // 保存的图像宽度
    bottomInfoHeight: 100, // 底部信息区高度
    tips: "微信扫码或保存图片了解更多", // 提示语
    propaganda: "好房，折扣房大卖场", // 提示语

    // 缓冲区，无需手动设定
    canvasWidth: 0, // 画布宽
    canvasHeight: 0, // 画布高
    canvasDom: null, // 画布dom对象
    canvas: null, // 画布的节点
    ctx: null, // 画布的上下文
    dpr: 1, // 设备的像素比
    posterHeight: 0, // 海报高
  },
  navTo (e) { //跳转
    var url = e.currentTarget.dataset.url;
    wx.navigateTo({
      url: url
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  getPhoneNumber(e) { //页面授权电话
    let that = this;
    if (e.detail.errMsg == "getPhoneNumber:ok") {
      let data = {
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv,
        appid: app.globalData.appid,
      }
      app.ports.api54({
        data
      }).then((res) => {
        that.setData({
          phone: false
        })
      }).catch(() => {
        console.error("授权电话号码解密失败！")
      })
    } else {
      return
    }
  },
  roleShowMean() { //显示隐藏“我的后台”，默认隐藏
    let that = this;
    app.ports.api30({}).then((res) => {
      if (res.data.phone_is_verified) { //判断是否授权电话号码
        that.setData({
          phone: false
        })
      }
      if (res.data.avatarUrl && res.data.nickname) { //判断是否头像
        that.setData({
          userInfoshow: false
        })
      }
      if (res.data.active_role_id) {
        // let v = [];
        // var lily = role.filter((p) => {
        //   return p.id == res.data.active_role_id //按id进行筛选匹配，返回一个权限字段数组
        // });
        // for(var h=0;h<lily.length;h++){v[h] =lily[h].code}
        that.setData({
          backShow: true
        })
      } else {
        // wx.showToast({
        //   title: '您当前身份为游客！',
        //   icon: 'none',
        //   duration: 1500
        // })
      }
    }).catch(() => {
      console.error('获取当前用户信息错了！');
    });

    // app.ports.api41({}).then((res) => {
    //   let role = res.data.results;
      
    // }).catch(() => {
    //   console.error('获取权限列表错了！');
    // });
  },

  onLoad: function (options) {
    let that = this;
    that.roleShowMean();
    wx.hideShareMenu({
      menus: ['shareAppMessage', 'shareTimeline']
    })
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: app.globalData.color,
    })
    let myStyle = '--color:' + app.globalData.color
    that.setData({
      myStyle: myStyle,
      userInfo: app.globalData.userInfo
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: async function () {
    var that = this;
    this.getTabBar().init();
    await getApp().ports.getInfo({}).then(async (res) => {
      var res = res.data;
      if (res.nickname) { //判断是否授用户信息
        app.globalData.login = false
      } else {
        app.globalData.login = true
      }
      wx.downloadFile({ //头像处理
        url: res.avatarUrl,
        success: function (res) {
          that.setData({
            photoUrl: res.tempFilePath
          })
        }
      })
      Object.assign(that.data,{
        userId: that.data.id,
        userPhone: res.phone
      })
      that.setData({
        name: res.nickname,
        avatarUrl: res.avatarUrl,
        phone: res.phone
      }) //按钮分享用
    }).catch(() => {
      console.error("获取自身信息出错！")
    })
    this.setData({
      login: app.globalData.login,
      identity:wx.getStorageSync('identity'),
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.onLoad()
    setTimeout(() => {
      wx.stopPullDownRefresh()
    }, 1000)
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

 
  business() {
    var that = this;
    wx.showLoading({
      title: "生成中"
    })

    that.qrcode()
    // 后台获取鸡汤内容 
    getApp().ports.modelConfig({data:{modelPosition: 6}}).then((res) => {
      that.setData({
        cardShow: true,
        posterUrl: app.globalData.imageRoot + res.data.imageUrl,
        soother:  res.data.modelName
      })
    })

    // wx.request({
    //   url: 'https://wawa-images.oss-cn-shenzhen.aliyuncs.com/random/ChickenSoup.js',
    //   data:{},
    //   method:"GET",
    //   success(res){
    //     that.qrcode()
    //     that.setData({
    //       cardShow: true,
    //       posterUrl: 'https://y.toasin.cn/api/public/v1/profile/upload/2023/04/29/tmp_f17975b5c5b2168198235b1202fdc9f014c5bdf48c35882f_20230429122722A007.jpg',
    //       soother:  res.data.split(',')[Math.ceil(Math.random() * 122)]
    //     })
    //   },
    //   fail(res){
    //     wx.hideLoading()
    //     wx.showToast({
    //       title: "生成失败,请重试",
    //       icon: 'none'
    //     })
    //     console.error('心灵鸡汤错误')
    //   },
    //   complete(res){
    //     setTimeout((res) => {
    //       wx.hideLoading()
    //     },15000)
    //   }
    // })
  },
  chicken() { //心灵鸡汤
    var that = this;
    var ctx = that.data.ctx;
    var text = that.data.soother; //这是要绘制的文本
    var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    ctx.font = "normal bold 25px sans-serif";
    ctx.fillStyle = "#fff"
    for (var a = 0; a < chr.length; a++) {
      if (ctx.measureText(temp).width < that.data.canvasWidth* 0.8) {
        temp += chr[a];
      } else {
        a--; //这里添加了a-- 是为了防止字符丢失
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);
    //如果数组长度大于2 则截取前两个
    if (row.length > 2) {
      ctx.font = "normal bold 25px sans-serif";
      ctx.fillStyle = "#fff"
      var rowCut = row.slice(0, 2);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        if (ctx.measureText(test).width < that.data.canvasWidth * 0.8) {
          test += rowPart[a];
        } else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0] + "..." //这里只显示两行，超出的用...表示
      rowCut.splice(1, 1, group);
      row = rowCut;
    }
    ctx.font = "normal bold 25px sans-serif";
    ctx.fillStyle = "#fff"
    for (var b = 0; b < row.length; b++) {
      ctx.fillText(row[b], that.data.canvasWidth * 0.1, app.globalData.system.windowHeight / 3 + b * 30, that.data.canvasWidth * 0.8);
    }
    // ctx.draw()
  },
  drawImage() {
    const query = wx.createSelectorQuery() // 创建一个dom元素节点查询器
    query.select('#canvasBox') // 选择我们的canvas节点
      .fields({ // 需要获取的节点相关信息
        node: true, // 是否返回节点对应的 Node 实例
        size: true // 是否返回节点尺寸（width height）
      }).exec((res) => { // 执行针对这个节点的所有请求，exec((res) => {alpiny})  这里是一个回调函数

        const dom = res[0] // 因为页面只存在一个画布，所以我们要的dom数据就是 res数组的第一个元素
        const canvas = dom.node // canvas就是我们要操作的画布节点
        const ctx = canvas.getContext('2d') // 以2d模式，获取一个画布节点的上下文对象
        const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备的像素比，未来整体画布根据像素比扩大
        this.setData({
          canvasDom: dom, // 把canvas的dom对象放到全局
          canvas: canvas, // 把canvas的节点放到全局
          ctx: ctx, // 把canvas 2d的上下文放到全局
          dpr: dpr // 屏幕像素比
        }, function () {
          this.drawing() // 开始绘图
        })
      })
  },
  // 绘制画面 
  drawing() {
    const that = this;
    that.drawPoster() // 绘制海报
      .then(function () { // 这里用同步阻塞一下，因为需要先拿到海报的高度计算整体画布的高度
        
        that.drawInfoBg() // 绘制底部白色背景
        that.drawQrcode() // 绘制小程序码
        that.drawText() // 绘制文字
        that.chicken()//心灵鸡汤
        that.canvasName()//姓名
        that.drawPhoto() // 绘制头像
        wx.hideLoading() // 隐藏loading
        that.setData({
          cardBtn:true
        })
      })
  },
  // 绘制海报
  drawPoster() {
    const that = this
    return new Promise(function (resolve, reject) {
      let poster = that.data.canvas.createImage(); // 创建一个图片对象
      poster.src = that.data.posterUrl // 图片对象地址赋值
      poster.onload = () => {
        that.computeCanvasSize(poster.width, poster.height) // 计算画布尺寸
          .then(function (res) {
            that.data.ctx.drawImage(poster, 0, 0, poster.width, poster.height, 0, 0, res.width, res.height);
            resolve()
          })
      }
    })
  },
  // 计算画布尺寸
  computeCanvasSize(imgWidth, imgHeight) {
    const that = this
    return new Promise(function (resolve, reject) {
      var canvasWidth = that.data.canvasDom.width // 获取画布宽度
      // var posterHeight = canvasWidth * (imgHeight / imgWidth) - 50// 计算海报高度
      var posterHeight = 500 // 计算海报高度
      var canvasHeight = posterHeight // 计算画布高度 海报高度+底部高度
      that.setData({
        canvasWidth: canvasWidth, // 设置画布容器宽
        canvasHeight: canvasHeight, // 设置画布容器高
        posterHeight: posterHeight // 设置海报高
      }, () => { // 设置成功后再返回
        that.data.canvas.width = that.data.canvasWidth * that.data.dpr // 设置画布宽
        that.data.canvas.height = canvasHeight * that.data.dpr // 设置画布高
        that.data.ctx.scale(that.data.dpr, that.data.dpr) // 根据像素比放大
        setTimeout(function () {
          resolve({
            "width": canvasWidth,
            "height": posterHeight
          }) // 返回成功
        }, 1200)
      })
    })
  },
  // 绘制白色背景
  // 注意：这里使用save 和 restore 来模拟图层的概念，防止污染
  drawInfoBg() {
    var that = this;
    // this.data.ctx.save();
    this.data.ctx.fillStyle = "#ffffff"; // 设置画布背景色
    this.roundRect(that.data.ctx, this.data.canvasWidth * 0.05, this.data.canvasHeight * 0.76, this.data.canvasWidth * 0.9, this.data.bottomInfoHeight, 10)
    // this.data.ctx.fillRect(this.data.canvasWidth * 0.05, this.data.canvasHeight * 0.76, this.data.canvasWidth * 0.9, this.data.bottomInfoHeight); // 填充整个画布
    // this.data.ctx.restore();
  },
  roundRect(ctx, x, y, w, h, r) {
    // 开始绘制
    ctx.save()
    ctx.beginPath()
    // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
    // 这里是使用 fill 还是 stroke都可以，二选一即可
    ctx.fillStyle = "#ffffff"
    // ctx.setStrokeStyle('transparent')
    // 左上角
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

    // border-top
    ctx.moveTo(x + r, y)
    ctx.lineTo(x + w - r, y)
    ctx.lineTo(x + w, y + r)
    // 右上角
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

    // border-right
    ctx.lineTo(x + w, y + h - r)
    ctx.lineTo(x + w - r, y + h)
    // 右下角
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

    // border-bottom
    ctx.lineTo(x + r, y + h)
    ctx.lineTo(x, y + h - r)
    // 左下角
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

    // border-left
    ctx.lineTo(x, y + r)
    ctx.lineTo(x + r, y)

    // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
    ctx.fill()
    // ctx.stroke()
    ctx.closePath()
    // 剪切
    ctx.clip()
    ctx.restore()
  },

  // 绘制头像
  drawPhoto() {
    let photoDiam = this.data.photoDiam // 头像路径
    let photo = this.data.canvas.createImage(); // 创建一个图片对象
    photo.src = this.data.photoUrl // 图片对象地址赋值
    photo.onload = () => {
      let radius = photoDiam / 2 // 圆形头像的半径
      let x = this.data.infoSpace + this.data.canvasWidth * 0.05 // 左上角相对X轴的距离
      let y = this.data.canvasHeight * 0.78 // 左上角相对Y轴的距离 ：整体高度 - 头像直径 - 微调
      this.data.ctx.save()
      this.data.ctx.beginPath()
      this.data.ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI, false) // arc方法画曲线，按照中心点坐标计算，所以要加上半径
      this.data.ctx.clip()
      this.data.ctx.drawImage(photo, 0, 0, photo.width, photo.height, x, y, photoDiam, photoDiam) // 详见 drawImage 用法
      this.data.ctx.restore();
    }
  },
  // 绘制小程序码
  drawQrcode() {
    let diam = this.data.qrcodeDiam // 小程序码直径
    let qrcode = this.data.canvas.createImage(); // 创建一个图片对象
    qrcode.src = this.data.qrcodeUrl // 图片对象地址赋值
    qrcode.onload = () => {
      let radius = diam / 2 // 半径
      let x = this.data.canvasWidth * 0.94 - this.data.infoSpace - diam // 左上角相对X轴的距离：画布宽 - 间隔 - 直径
      let y = this.data.canvasHeight * 0.78 // 左上角相对Y轴的距离 ：画布高 - 间隔 - 直径 + 微调
      this.data.ctx.save()
      this.data.ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI) // arc方法画曲线，按照中心点坐标计算，所以要加上半径
      this.data.ctx.clip()
      this.data.ctx.drawImage(qrcode, 0, 0, qrcode.width, qrcode.height, x, y, diam, diam) //绘制小程序图片
      this.data.ctx.restore();
    }
  },
  // 绘制文字
  drawText() {
    const infoSpace = this.data.infoSpace + this.data.canvasWidth * 0.06 // 下面数据间距
    const photoDiam = this.data.photoDiam * 0.35 // 圆形头像的直径
    this.data.ctx.save();
    this.data.ctx.font = "16px Arial"; // 设置字体大小
    this.data.ctx.fillStyle = "#fff"; // 设置文字颜色
    // 年
    this.data.ctx.fillText(this.data.year, infoSpace+this.data.ctx.measureText(this.data.month).width+ 10, this.data.canvasHeight * 0.15);
    // 月
    this.data.ctx.fillText(this.data.month, infoSpace, this.data.canvasHeight * 0.15);
    // 星期
    this.data.ctx.fillText(this.data.week, infoSpace + this.data.ctx.measureText(this.data.day).width+ 10, this.data.canvasHeight * 0.1);
    // 斜杠
    this.data.ctx.fillText('/', infoSpace+ this.data.ctx.measureText(this.data.month).width+ 3, this.data.canvasHeight * 0.15);
    this.data.ctx.font = "25px Arial"; // 设置字体大小
    this.data.ctx.fillStyle = "#fff"; // 设置文字颜色
    // 日
    this.data.ctx.fillText(this.data.day, infoSpace, this.data.canvasHeight * 0.1);
    this.data.ctx.font = "14px Arial"; // 设置字体大小
    this.data.ctx.fillStyle = "#333333"; // 设置文字颜色
    // 姓名
    // this.data.ctx.fillText(this.data.name, infoSpace * 2 + photoDiam, this.data.canvasHeight * 0.82);
    
    // 电话
    this.data.ctx.fillText(this.data.userPhone, infoSpace * 2 + photoDiam, this.data.canvasHeight * 0.86);
    // 提示语
    this.data.ctx.fillText(this.data.tips, infoSpace, this.data.canvasHeight * 0.93);
    this.data.ctx.restore();
  },
  canvasName(){
    var that = this;
    var ctx = that.data.ctx;
    var text = that.data.name; //这是要绘制的文本
    var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
    const photoDiam = this.data.photoDiam * 0.35 // 圆形头像的直径
    const infoSpace = this.data.infoSpace + this.data.canvasWidth * 0.06 // 下面数据间距
    var temp = "";
    var row = [];
    this.data.ctx.font = "14px Arial"; // 设置字体大小
    this.data.ctx.fillStyle = "#333333"; // 设置文字颜色
    for (var a = 0; a < chr.length; a++) {
      if (ctx.measureText(temp).width < that.data.canvasWidth* 0.2) {
        temp += chr[a];
      } else {
        temp+='...'
        break;
      }
    }
    this.data.ctx.fillText(temp, infoSpace * 2 + photoDiam, that.data.canvasHeight * 0.82);
  },
  onClose() {
    this.data.ctx.clearRect(0,0, 1000,1000)
    this.setData({
      cardShow: false,
    })
  },
  async qrcode() { //拉取自身信息
    // wx.showLoading({
    //   title: '正在生成海报',
    // })
    var that = this;
    let appid = app.globalData.appid;
    var week;
    let json = {
      category: 'getwxacodeunlimit'
    } //有个数限制
    let data = {
      appid: appid, //小程序id
      path: "pages/index/index", //扫码进入那个页面
      params: JSON.stringify({
        userId: wx.getStorageSync('userId'),
      }) //可以传输多个值
    }
    await app.ports.apiqrcode({
      data,
      json
    }).then(async (obj) => {
      // let base64 = wx.arrayBufferToBase64(obj.data)
      let base64 = obj.data;
      let fsm = wx.getFileSystemManager();
      let showImgData = base64;
      showImgData = showImgData.replace(/\ +/g, ""); //去掉空格方法
      showImgData = showImgData.replace(/[\r\n]/g, "");
      let buffer = wx.base64ToArrayBuffer(showImgData);
      let fileName = wx.env.USER_DATA_PATH + '/share_img.png'
      fsm.writeFileSync(fileName, buffer, 'binary');
      var weekArray = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
      var date = time.IntervalTime(null, 0).replace(/-/g,"/");
      var week = weekArray[new Date(date).getDay()];
      var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
      var month = months[Number(time.IntervalTime(null, 0).substring(5, 7))-1]
      that.setData({
        qrcodeUrl: fileName,
        year: time.IntervalTime(null, 0).substring(0, 4),
        month: month,
        day: time.IntervalTime(null, 0).substring(8, 10),
        week: week
      })
      that.drawImage()
    }).catch(() => {
      console.error('生成二维码错误！')
    })
  },
  save() {
    var that = this;
    wx.canvasToTempFilePath({
      canvas: this.data.canvas, // 使用2D 需要传递的参数
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功',
              success() {
               that.onClose()
              }
            })
          }
        })
      }
    })
  },
  preventdefault() {},
})